<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{{title}}</title>
    <meta name="description" content="koboform view">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {% load static %}
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
    <link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon-32x32.png' %}" />
    <link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon-16x16.png' %}" />
    <link rel="manifest" href="{% static 'site.webmanifest' %}" />
    <link rel="mask-icon" href="{% static 'safari-pinned-tab.svg" color="#2095f3' %}" />
    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" />

    <link rel="stylesheet" href="{% static 'css/normalize.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <link rel="stylesheet" href="{% static 'kobo.compiled/kobo.css' %}">
    <link rel="stylesheet" href="{% static 'components/fontawesome/css/font-awesome.css' %}">

    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script>window.html5 || document.write('<script src="{% static 'js/vendor/html5shiv.js' %}"><\/script>')</script>
    <![endif]-->
  </head>
  <body>
    <!--[if lt IE 8]>
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div class="header-container">
      <header class="wrapper clearfix">
        <h1 class="title">{{ title }}</h1>
        <nav>
          <ul>
            <li><a href="{% url 'asset-list' %}">{{user.username}} assets</a></li>
            <li><a href="{% url 'asset-detail' asset.uid %}">{{asset.uid}}</a></li>
          </ul>
        </nav>
      </header>
    </div>

    <div class="main-container">
      <div class="main wrapper clearfix">
        <div class="survey-wrapper">
        </div>
        <hr>
        <code>
          <pre class='survey-asset-url'>{% url 'asset-content' asset.uid %}</pre>
        </code>
      </div> <!-- #main -->
    </div> <!-- #main-container -->

    <script src="{% static 'components/jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'components/jquery-migrate/jquery-migrate.js' %}"></script>
    <script src="{% static 'components/underscore/underscore.js' %}"></script>
    <script src="{% static 'components/backbone/backbone.js' %}"></script>
    <script src="{% static 'components/select2/select2.min.js' %}"></script>
    <script src="{% static 'js/jquery.poshytip.js' %}"></script>
    <script src="{% static 'js/jquery-ui-1.10.4.custom.js' %}"></script>
    <script src="{% static 'components/x-editable/dist/jquery-editable/js/jquery-editable-poshytip.js' %}"></script>
    <script src="{% static 'components/jquery.scrollTo/jquery.scrollTo.js' %}"></script>
    <script src="{% static 'js/Backbone.Validation.js' %}"></script>

    <script src="{% static 'components/requirejs/require.js' %}"></script>
    <script>
      // from dkobo's log.coffee
      window.log = function(){
        console.log.apply(console, arguments);
      }
    </script>
    <script>
    function displaySurvey(xlform, surveyContent) {
      window.koboform = {
        xlform: xlform,
        survey: xlform.model.Survey.load(surveyContent)
      };
      koboform.surveyApp = new xlform.view.SurveyApp({
        survey: koboform.survey,
        save: function(evt){
          var survey = this.survey;
          var p = new Promise(function(resolve, reject){
            try {
              var spreadsheetStructure = survey.toSsStructure();
              resolve()
            } catch (e) {
              reject(e)
            }
          });
          p.constructor.prototype.finally = p.constructor.prototype.then;
          return p;
        }
      });
      $('.survey-wrapper').eq(0).append(koboform.surveyApp.$el);
      koboform.surveyApp.render();
    }
    function init(xlform) {
      var saUrl = $('.survey-asset-url').eq(0).text();
      $.getJSON(saUrl).done(function(data){
        displaySurvey(xlform, data);
      });
    }

    require.config({baseUrl: '{% static '' %}'});
    require(['test/components'], function(components){
      var k, v, paths = {};
      var stubs = {
        'jquery': 'build_stubs/jquery.js',
        'underscore': 'build_stubs/underscore.js',
        'jquery': 'build_stubs/jquery.js'
      };
      for (k in components.dirPaths) {
        paths[k] = components.dirPaths[k];
      }
      for (k in components.libs) {
        paths[k] = components.libs[k].replace(/\.js$/, '');
      }
      for (k in stubs) {
        paths[k] = stubs[k].replace(/\.js$/, '');
      }
      require.config({
        paths: paths,
        urlArgs: "bust=" +  (new Date()).getTime(),
      });
      require(['cs!xlform/_xlform.init'], init);
    });

    </script>
  </body>
</html>
